<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .status {
            padding: 10px;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .connecting {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 3px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
            width: 200px;
        }
        #messages {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #f8f9fa;
        }
        .message {
            margin-bottom: 5px;
            padding: 5px;
            border-radius: 3px;
        }
        .message.sent {
            background-color: #e3f2fd;
            text-align: right;
        }
        .message.received {
            background-color: #f1f8e9;
        }
        .message.system {
            background-color: #fff3e0;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>WebSocket 通知连接测试</h1>
    
    <div class="container">
        <h3>连接状态</h3>
        <div id="status" class="status disconnected">未连接</div>
        
        <div>
            <label for="userId">用户ID:</label>
            <input type="text" id="userId" value="123" placeholder="输入用户ID">
            <button id="connectBtn" onclick="connect()">连接</button>
            <button id="disconnectBtn" onclick="disconnect()" disabled>断开连接</button>
        </div>
    </div>
    
    <div class="container">
        <h3>消息</h3>
        <div id="messages"></div>
        
        <div style="margin-top: 10px;">
            <input type="text" id="messageInput" placeholder="输入消息" disabled>
            <button id="sendBtn" onclick="sendMessage()" disabled>发送</button>
        </div>
    </div>
    
    <div class="container">
        <h3>说明</h3>
        <p>此页面用于测试WebSocket通知连接。</p>
        <p><strong>连接地址:</strong> ws://localhost:8080/ws/notice/{userId}</p>
        <p><strong>注意:</strong> 请确保后端服务正在运行在8080端口。</p>
    </div>

    <script>
        let websocket = null;
        let isConnected = false;
        
        function updateStatus(status, className) {
            const statusElement = document.getElementById('status');
            statusElement.textContent = status;
            statusElement.className = 'status ' + className;
        }
        
        function addMessage(message, type = 'system') {
            const messagesDiv = document.getElementById('messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message ' + type;
            messageDiv.innerHTML = `<span style="color: #666; font-size: 12px;">[${new Date().toLocaleTimeString()}]</span> ${message}`;
            messagesDiv.appendChild(messageDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        function connect() {
            const userId = document.getElementById('userId').value;
            if (!userId) {
                alert('请输入用户ID');
                return;
            }
            
            if (websocket && websocket.readyState === WebSocket.OPEN) {
                addMessage('已经连接，请先断开连接', 'system');
                return;
            }
            
            updateStatus('连接中...', 'connecting');
            addMessage('正在连接到 ws://localhost:8080/ws/notice/' + userId, 'system');
            
            try {
                websocket = new WebSocket('ws://localhost:8080/ws/notice/' + userId);
                
                websocket.onopen = function(event) {
                    isConnected = true;
                    updateStatus('已连接', 'connected');
                    addMessage('WebSocket连接成功', 'system');
                    
                    document.getElementById('connectBtn').disabled = true;
                    document.getElementById('disconnectBtn').disabled = false;
                    document.getElementById('messageInput').disabled = false;
                    document.getElementById('sendBtn').disabled = false;
                    document.getElementById('userId').disabled = true;
                };
                
                websocket.onmessage = function(event) {
                    addMessage('收到消息: ' + event.data, 'received');
                };
                
                websocket.onclose = function(event) {
                    isConnected = false;
                    updateStatus('连接已关闭', 'disconnected');
                    addMessage('WebSocket连接已关闭 (代码: ' + event.code + ')', 'system');
                    
                    document.getElementById('connectBtn').disabled = false;
                    document.getElementById('disconnectBtn').disabled = true;
                    document.getElementById('messageInput').disabled = true;
                    document.getElementById('sendBtn').disabled = true;
                    document.getElementById('userId').disabled = false;
                };
                
                websocket.onerror = function(error) {
                    updateStatus('连接错误', 'disconnected');
                    addMessage('WebSocket连接错误: ' + error, 'system');
                    console.error('WebSocket错误:', error);
                };
                
            } catch (error) {
                updateStatus('连接失败', 'disconnected');
                addMessage('连接失败: ' + error.message, 'system');
                console.error('连接错误:', error);
            }
        }
        
        function disconnect() {
            if (websocket) {
                websocket.close();
                websocket = null;
            }
        }
        
        function sendMessage() {
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value.trim();
            
            if (!message) {
                alert('请输入消息内容');
                return;
            }
            
            if (!isConnected || !websocket) {
                alert('WebSocket未连接');
                return;
            }
            
            try {
                websocket.send(message);
                addMessage('发送消息: ' + message, 'sent');
                messageInput.value = '';
            } catch (error) {
                addMessage('发送消息失败: ' + error.message, 'system');
                console.error('发送错误:', error);
            }
        }
        
        // 回车发送消息
        document.getElementById('messageInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
        
        // 页面关闭时断开连接
        window.addEventListener('beforeunload', function() {
            if (websocket) {
                websocket.close();
            }
        });
    </script>
</body>
</html>